<!-- 登陆 -->
<template>
  <div class="login_main">
    <div class="form_top_div">Warm And Sunny</div>
    <van-form @submit="onSubmit">
      <van-cell-group inset class="">
        <van-field
          v-model="userName"
          left-icon="user-o"
          name="userName"
          label="用户名"
          clearable
          placeholder="用户名"
          clickable
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="userPassword"
          type="password"
          clearable
          left-icon="closed-eye"
          name="userPassword"
          label="密码"
          clickable
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          <span class="login_font_style">登&emsp;&emsp;陆</span>
        </van-button>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="primary" @click="toRegisterPage">
          <span class="register_style">没有账号？去注册一个</span>
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { userLogin } from '../../api/login.js';
export default {
  data() {
    return {
      userName: '',
      userPassword: '',
    }
  },

  // created(){
  //   console.log('12345123'.search('2'));
  // },

  methods: {
    // 去注册页面
    toRegisterPage() {
      this.$router.push('/register')
    },

    // 提交表单
    onSubmit(){
      var params = {
        userName: this.userName,
        userPassword: this.userPassword,
      }
      userLogin(params).then(res=>{
        if (res.data.code === 10000 && res.data.message === '登陆成功！') {
          this.$toast.success(res.data.message);
          this.$router.push("/");
          // 保存token
          localStorage.setItem('token',res.data.data);
        }else{
          this.$toast.fail(res.data.message);
          this.userName = '';
          this.userPassword = '';
        }
      })
    }

  },
}
</script>

<style scoped>
.login_main {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background-image: url('https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/bg/hosebg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.van-form {
  position: relative;
  top: 180px;
  opacity: 0.8;
}
.form_top_div {
  /* width: 15em; */
  height: 3em;
  /* background-color: aliceblue; */
  color: rgb(212, 155, 172);
  text-align: center;
  margin: auto;
  padding-top: 1.5em;
  font-family: Courier New;
  font-weight: 1000;
  font-size: 30px;
  /* font: italic 2em Georgia, serif; */
}
.login_font_style {
  font-family: Courier New;
  font-weight: 600;
  font-size: 18px;
}
</style>
